<template>
    <div>
        <div class="comment_box">
            <div class="user_comment">
                <span class="box_title">请随时注意查收QQ邮箱,查看回复消息</span>
                <el-popover
                    placement="bottom-start"
                    width="300"
                    v-model="visible">
                <div style="text-align: right; margin: 0">
                    <el-form ref="commRef">
                        <el-form-item>
                            <el-input type="textarea" v-model="words.cContent"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button size="mini" type="text" @click="quit">取消</el-button>
                    <el-button type="primary" size="mini" @click="leaveWordM">确定</el-button>
                </div>
                <el-button size="small" type="success" slot="reference">发表评论</el-button>
                </el-popover>
            </div>
<!--            留言区-->
            <el-card class="card">
                <div v-for="(item,index) in commList" :key="index" class="comm_con"
                     v-show="item.cContent !== null">
                    <div class="user_info">
                        <img :src="item.userImg" style="width: 50px;height: 50px;border-radius: 50%"/>
                        <span class="user_name">{{item.userName}}&nbsp;评论：</span>
                        <span class="time">{{Number(item.cTime) | dateFormat}}</span>
                    </div>
                    <div class="content">{{item.cContent}}</div>
<!--                    显示消息回复区-->
                    <div class="replay" v-for="(items,index1) in replayList" :key="index1"
                    v-show="item.userName === items.to_cName">
                        <span>{{items.userName}}&nbsp;对&nbsp;{{items.to_cName}}&nbsp;说：</span>
                        <span style="font-size: 10px">{{Number(items.cTime) | dateFormat}}</span>
                        <div class="replay_con">{{items.cContent}}</div>
                    </div>
                    <div class="util">
                        <i class="el-icon-star-off" @click="toStar(item)"
                        v-bind:class="{'star': item.active === true}">&nbsp;{{item.star}}</i>
                        <i class="el-icon-chat-dot-square" @click="item.visible = !item.visible"></i>
                    </div>
<!--                    回复消息区-->
                    <div class="replay_box" v-show="item.visible">
                        <el-input type="textarea" v-model="replayData.cContent"
                        :key="index"></el-input>
                        <el-tag type="success" @click="replay(item)">发送</el-tag>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {leaveWord,getComm,toReplay,starN} from "../../network/leaveWord";

    export default {
        name: "LeaveMess",
        components:{

        },
        data(){
            return {
                visible:false,
                words:{
                    cName:'',
                    cContent:'',
                    cTime:'',
                },
                commList:[],
                replayList:[],
                replayData:{
                    cName:'',
                    to_cName:'',
                    cContent:'',
                    cTime:'',
                    toEmail:''
                },
            }
        },
        methods:{
            quit(){
              this.$refs.commRef.resetFields();
              this.visible = false;
            },
            //发送留言
            leaveWordM(){
                if (this.words.cContent === ''){
                    this.$message.warning('请输入留言信息！')
                }else {
                    if (this.$store.state.userInfo.length !== 0){
                        const d = new Date();
                        this.words.cName = this.$store.state.userInfo[0].result[0].userName;
                        this.words.cTime = d.getTime();
                        leaveWord(this.words).then(res => {
                            if (res.data.meta.status !== 200){
                                this.$message.error(res.data.meta.msg);
                            }else {
                                this.$message.success(res.data.meta.msg);
                                this.$refs.commRef.resetFields();
                                this.visible = false;
                                this.getCommM();
                            }
                        })
                    }else {
                        this.$message.warning('请登录！')
                    }
                }
            },
            //回复消息
            replay(item){
                if (this.replayData.cContent === ''){
                    this.$message.warning('请输入消息！');
                }else {
                    if (this.$store.state.userInfo.length === 0){
                        this.$message.warning('请登录！');
                    }else {
                        this.replayData.cName = this.$store.state.userInfo[0].result[0].userName;
                        this.replayData.to_cName = item.userName;
                        const dt = new Date();
                        this.replayData.cTime = dt.getTime();
                        this.replayData.toEmail = item.email;
                        toReplay(this.replayData).then(res => {
                            if (res.data.meta.status !== 200){
                                this.$message.error(res.data.meta.msg);
                            }else {
                                this.$message.success(res.data.meta.msg);
                                item.visible = false;
                                this.replayData.cContent = '';
                                this.getCommM();
                            }
                        });
                    }
                }
            },
            //获取留言内容
            getCommM(){
                getComm().then(res => {
                    if (res.data.meta.status !== 200){
                        this.$message.error(res.data.meta.msg);
                    }else {
                        this.commList = [];
                        this.replayList = [];
                        res.data.data.forEach(item => {
                            item.active = false;
                            item.visible = false;
                            if (item.userImg === null){
                                item.userImg = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                            }else {
                                item.userImg = 'http://www.zydz.icu:3000'+item.userImg
                            }
                            if (item.c_id === 0){
                                this.commList.push(item)
                            }else {
                                this.replayList.push(item)
                            }
                        })
                    }
                })
            },
            //点赞
            toStar(item){
                if (this.$store.state.userInfo.length === 0){
                    this.$message.warning('请登录！')
                }else {
                    item.active = true;
                    item.star+=1;
                    const data = {
                        cName:item.userName,
                        star:item.star
                    };
                    starN(data).then(() => {
                        item.active = false;
                    });
                }
            }
        },
        created() {
            this.getCommM();
        }
    }
</script>

<style scoped lang="less">
    .card{
        border:10px #fffdef solid;
        margin:30px 0 0 0;
    }
    .user_comment{
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        position: fixed;
        top: 60px;
        right: 0.5rem;
        left: 1rem;
        z-index:999;
        .box_title{
            flex: 1;
            text-align: center;
            font-size: 12px;
            animation: bottom linear 5s;
            animation-iteration-count: infinite;
        }
    }
    .el-form{
        .el-input{
            height: 200px;
            resize: none;
        }
    }
    .comm_con{
        margin-top: 2rem;
        padding-bottom: 10px;
        border-bottom: 5px whitesmoke solid;
        .user_info{
            display: flex;
            height: 50px;
            align-items: center;
            .user_name{
                margin-left: 10px;
                font-style: italic;
                animation: bottom linear 5s;
                animation-iteration-count: infinite;
            }
            .time{
                flex: 1;
                text-align: right;
                font-size: 13px;
                font-style: oblique;
            }
        }
        .content{
            background-color: #f6f6f6;
            box-shadow: 10px 10px 10px 10px #f5f5f5;
            word-wrap: break-word;
            padding: 5px 10px;
            margin-top: 10px;
        }
        .util{
            margin-top: 15px;
            text-align: right;
            i{
                font-size: 20px;
                margin-left: 20px;
            }
        }
        .replay{
            background-color: #f6f6f6;
            margin-top: 10px;
            margin-left: 8%;
            padding: 10px;
            width: 80%;
            .replay_con{
                padding-top: 5px;
                border-top: 2px seashell solid;
                margin-top: 10px;
                box-shadow: 10px 10px 10px 10px #eeeeee;
                padding-left: 60px;
            }
        }
        .star{
            color: lightpink;
        }
        .replay_box{
            margin-top: 10px;
            text-align: right;
            .el-input{
                width: 100%;
            }
            .el-tag{
                margin-top: 8px;
            }
        }
    }
    @keyframes bottom {
        0%{
            color: #b3d8ff;
        }
        45%{
            color: skyblue;
        }
        75%{
            color: lightpink;
        }
        100%{
            color: #b3d8ff;
        }
    }

</style>